<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title> 
<!-- 引入element样式 -->
<link rel="stylesheet"
	href="../public/plugins/element-ui/lib/theme-chalk/index.css">
<script src="../public/libs/vue.js"></script>
<!--引入element组件库-->
<script src="../public/plugins/element-ui/lib/index.js"></script>
<script src="../public/plugins/axios/dist/axios.js"></script> 
</head>
<body>
	<div id="headVue"  >
		<div>
		<el-table :data="prodLines"	size="mini"  :header-cell-style="{'text-align':'center',background:'#eef1f6',color:'#0000FF'}"
			ref="prodLines"  border style="background-color: bisque;"> 
			<el-table-column type="expand" width=50>
				<template slot-scope="props">
					<el-table class="table-in-table" :data="props.row.parts"
						style="width: 100%;"	row-key="id"border
					>
						<el-table-column prop="partCode" label="配件编号" width="200"></el-table-column>
						<el-table-column prop="partName" label="配件名称" width="200"></el-table-column>
						<el-table-column prop="specification" label="规格型号" width="200"></el-table-column>
						<el-table-column prop="supplier" label="厂家"></el-table-column>
						<el-table-column label="操作" width="120">
						<template slot-scope="props">
							<el-button type="text" size="small">移除</el-button>
						</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>               
			<el-table-column label="ID" prop="id" width=60>
				</el-table-column>
			<el-table-column prop="productCode" label="产品编码" width=100 >				
				
			</el-table-column>
			<el-table-column prop="productName" label="产品名称" width=200>
				</el-table-column>
			<el-table-column prop="figureNo" label="图号" width=100 >
				</el-table-column>
			<el-table-column prop="vesselType" label="船型" width=100>
				</el-table-column>
			<el-table-column prop="vesselName" label="船名号" width=100>
				</el-table-column>
			<el-table-column prop="delivery" label="发货日期" width=100>
				</el-table-column>
			<el-table-column prop="contractNo" label="合同号" width=100>
				</el-table-column>
			<el-table-column label="操作"	style="width:100 ;" align="center"> 
					<template slot-scope="rowData">
						<el-button	size="mini" type="primary" @click="delRow('prod',rowData.row)">查看详情</el-button> 
					</template> 
				</el-table-columm>
		</el-table> 

		</div>
	</div>
	
	
<script>
var head = new Vue({ 
	el: "#headVue",
	data:{
			prodLines: [{id:1001,productCode:"MJ0034",productName:"dd-38液压机",figureNo:"M3001",
				vesselType:"大型拖网",vesselName:"DT002",delivery:"2025-02-30",contractNo:"sdfas323",
				parts:[{partCode:"FM001",partName:"阀门",specification:"0X0-33",supplier:"基设长宁"},
				{partCode:"DP015",partName:"垫片",specification:"SMS592L",supplier:"南海照星"}]},
				{id:2001,productCode:"JK7501",productName:"150KT液压车",figureNo:"M5042",
				vesselType:"金枪鱼钓",vesselName:"JQ43-9",delivery:"3046-02-30",contractNo:"sdfa33434"}],
			
			tableHead:{}
			
		},
	methods: 
	{ 
		delRow:function(val){

		},
		
		
	}
	});


</script>

<style >
	
	.el-table{
       width:99.9%!important;
	}
	.el-row {
    margin-bottom: 20px;
    
  }
  el-row:last-child {
      margin-bottom: 0;
    }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 
  .myMargin{
  	margin-left:2%;
  }
</style> 
</body>

</html>
